<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="/lib/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/css/blogManage.css" />
    <script language="javascript" type="text/javascript" src="/lib/My97DatePicker/WdatePicker.js"></script>

    <title>Title</title>

    <style>
        .link{
            height: 50px;
            background-color:#f8f8f8;
        }
        .link a {
            margin-left:10px;
            padding-top:10px;
            width: 80px;
            display: inline-block;
            text-decoration: none;
            text-align: center;
            color: #666;
            font-size: 20px;
            font-weight:300;
        }
        .link a:hover {
            font-weight:500;
        }
        b{
            margin-left:10px;
            padding-top:10px;
            font-weight: 700;
            border-bottom: 2px solid #38f;
            color: #323232;
            font-size: 20px;
        }
    </style>
</head>
<body>
<!--<script type="text/x-template" id="page">-->
    <!--<ul class="pagination" style="float: right">-->
        <!--<li v-show="current != 1" @click="current&#45;&#45; && goto(current&#45;&#45;)" >-->
            <!--<a href="#">上一页</a>-->
        <!--</li>-->
        <!--<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">-->
            <!--<a href="#" >{{index}}</a>-->
        <!--</li>-->
        <!--<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">-->
            <!--<a href="#" >下一页</a>-->
        <!--</li>-->
    <!--</ul>-->
<!--</script>-->
<div class="link">
    <b>博文管理</b>
    <a href="userManage.html" style="display: inline-block">
        用户管理
    </a>
</div>
<br />

<div id="vueBlog">
    <div>
        <div class="my-container">
            <label style="font-size:16px" class="myLabel-content">博文名称：</label>
            <div class="myText-content">
                <input v-model="blogName" style="line-height: 1.2" class="form-control" placeholder="博文名称：" />
            </div>
        </div>
        <div class="my-container">
            <label style="font-size:16px" class="myLabel-content">作者名称：</label>
            <div class="myText-content">
                <input v-model="blogAuthor" style="line-height: 1.2" class="form-control" placeholder="作者名称：" />
            </div>
        </div>
        <div class="my-container">
            <label style="font-size:16px" class="myLabel-content">发布日期：</label>
            <div class="myText-content">
                <input style="line-height: 1.2" class="form-control" onClick="WdatePicker({onpicking:function(dp){v1.$data.startTime=dp.cal.getNewDateStr(); }})" v-model="startTime" >
            </div>
            <div class="myText-content">--</div>
            <div class="myText-content">
                <input style="line-height: 1.2" class="form-control" onClick="WdatePicker({onpicking:function(dp){v1.$data.endTime=dp.cal.getNewDateStr(); }})" v-model="endTime">
            </div>
        </div>
        <div class="myBtn-content">
            <button type="button" class="btn btn-primary" v-on:click="getDataJson">搜索</button>
        </div>
    </div>
    <br />
    <table class="table table-hover">
        <thead>
        <tr>
            <th>博文</th>
            <th>作者</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="value in blogInfo">
            <td><a :href="getBlogHref(value.id)" target=_blank>{{value.title}}</a></td>
            <td>{{value.creatname}}</td>
            <td><button type="button"  class="btn btn-xs btn-link"
                        v-on:click="deleteBlog(value.id)">删除</button></td>
        </tr>
        </tbody>
    </table>
</div>
<div id="app">
    <ul class="pagination" style="float: right">
        <li v-show="current != 1" @click="current-- && goto(current--)" >
            <a href="#">上一页</a>
        </li>
        <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
            <a href="#" >{{index}}</a>
        </li>
        <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
            <a href="#" >下一页</a>
        </li>
    </ul>
    <!--
    <page></page>
    <select class="form-control" style="float: right;width: 100px;line-height: 1.5;margin-right:10px" v-model="selected">
        <option style="width: 100px;" v-for="item in items" v-bind:value="item.value">{{item.text}}</option>
    </select>
    <span style="float: right;margin-top: 5px;margin-right:10px;">每页博文数:</span>
    -->
</div>
<script>
    // var pageVue=Vue.component("page",{
    //     template:"#page",
    //     data:function(){
    //         return{
    //             current:1,    //当前页号
    //             showItem:5,   //页码显示项数
    //             allpage:10,    //当前页数
    //         }
    //     },
    //     created:function(){
    //         var self=this;
    //         jQuery.post("./allBlog",{pagesize: 6,current:self.current,blogName:v1.blogName,
    //             blogAuthor:v1.blogAuthor,startTime:v1.startTime,endTime:v1.endTime},function(data){
    //             console.log("current:"+self.current);
    //             console.log(data);
    //             self.allpage=data.allpage;
    //             v1.$data.blogInfo=data.conten;
    //         })
    //     },
    //     computed:{
    //         pages:function(){
    //             var pag = [];
    //             if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
    //                 //总页数和要显示的条数那个大就显示多少条
    //                 var i = Math.min(this.showItem,this.allpage);
    //                 while(i){
    //                     pag.unshift(i--);
    //                 }
    //             }else{ //当前页数大于显示页数了
    //                 var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
    //                     i = this.showItem;
    //                 if( middle >  (this.allpage - this.showItem)  ){
    //                     middle = (this.allpage - this.showItem) + 1
    //                 }
    //                 while(i--){
    //                     pag.push( middle++ );
    //                 }
    //             }
    //             return pag
    // }
    // },
    // methods:{
    //     goto:function(index){
    //         if(index == this.current) return;
    //         this.current = index;
    //         //这里可以发送ajax请求
    //         self=this;
    //
    //         jQuery.post("./allBlog",{pagesize: 6,current:self.current,blogName:v1.blogName,
    //             blogAuthor:v1.blogAuthor,startTime:v1.startTime,endTime:v1.endTime},function(data){
    //             console.log("current:"+self.current);
    //             console.log(data);
    //             self.allpage=data.allpage;
    //             v1.$data.blogInfo=data.conten;
    //         })
    //     }
    // }
    // })

    var v1=new Vue({
        el:'#vueBlog',
        data:{
            //blogInfo以JSON形式来保存所有博文信息
            blogInfo: [
            ],
            startTime:'',
            endTime:'',
            blogName:'',
            blogAuthor:''
        },
        methods: {
            getDataJson:function(){
                console.log(1);
                self=this;
                /*
                jQuery.getJSON("./testBlog",function(data){
                    //向后台请求所有博文的信息
                    console.log(data);
                    self.blogInfo=data.data;
                    pageVue.allpage=data.pageNums;
                })*/
                jQuery.post("./allBlog",{pagesize: 6,current:1,blogName:this.blogName,
                    blogAuthor:this.blogAuthor,startTime:this.startTime,endTime:this.endTime},function(data){
                    console.log("current:"+vm.current);
                    console.log(data);
                    v1.$data.blogInfo=data.conten;
                    vm.current=1;
                    vm.allpage=data.allpage;
                })
            },
            deleteBlog:function(blogId){
                console.log(blogId);
                if(confirm('确定删除该篇博文吗？'))
                {
                    //把删除的博文信息发给后台
                    //jQuery.post("./testJson", {username: jQuery("#username").val(), userpwd: jQuery("#userpwd").val()});
                    jQuery.post("./deleteBlog", {id:blogId});
                    location.reload();
                }
                else
                {}
            },
            getBlogHref:function(blogid){
                return 'http://localhost:5001/art/'+blogid;    //在此处添加博文跳转的URL
            }
        },
        created :function(){
            this.getDataJson();
        }
    })

    var vm=new Vue({
        el:"#app",
        data:{
            current:1,    //当前页号
            showItem:5,   //页码显示项数
            allpage:1,    //当前页数
        },
        created:function(){
            var self=this;
            jQuery.post("./allBlog",{pagesize: 6,current:self.current,blogName:v1.blogName,
                blogAuthor:v1.blogAuthor,startTime:v1.startTime,endTime:v1.endTime},function(data){
                console.log("current:"+self.current);
                console.log(data);
                self.allpage=data.allpage;
                v1.$data.blogInfo=data.conten;
            })
        },
        computed:{
            pages:function(){
                var pag = [];
                if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var i = Math.min(this.showItem,this.allpage);
                    while(i){
                        pag.unshift(i--);
                    }
                }else{ //当前页数大于显示页数了
                    var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
                        i = this.showItem;
                    if( middle >  (this.allpage - this.showItem)  ){
                        middle = (this.allpage - this.showItem) + 1
                    }
                    while(i--){
                        pag.push( middle++ );
                    }
                }
                return pag
            }
        },
        methods:{
            goto:function(index){
                if(index == this.current) return;
                this.current = index;
                //这里可以发送ajax请求
                self=this;

                jQuery.post("./allBlog",{pagesize: 6,current:self.current,blogName:v1.blogName,
                    blogAuthor:v1.blogAuthor,startTime:v1.startTime,endTime:v1.endTime},function(data){
                    console.log("current:"+self.current);
                    console.log(data);
                    self.allpage=data.allpage;
                    v1.$data.blogInfo=data.conten;
                })
            }
        }
        /*
        data:{
            items:[{text:'5',value:'5'},{text:'10',value:'10'},{text:'15',value:'15'}],
            selected:'10'
        }*/
    })
</script>
</body>
</html>